<template>
    申报状态<select v-model="sel">
    <option value="-1">全部</option>
    <option value="0">已申报</option>
    <option value="1">审核中</option>
    <option value="2">已审核</option>
</select>
    <input type="button" value="查询" @click="check(this.sel)">

    <table border="1px">
        <caption>申报项目列表</caption>
        <tr>
            <th>项目编号</th>
            <th>项目名称</th>
            <th>申报开始日期</th>
            <th>申报结束日期</th>
            <th>申报状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(e,i) in programarr" :key="i">
            <td>{{e.pid}}</td>
            <td>{{e.pname}}</td>
            <td>{{e.startdate}}</td>
            <td>{{e.enddate}}</td>
            <td>
                <p v-if="e.status===0">已申报</p>
                <p v-if="e.status===1">审核中</p>
                <p v-if="e.status===2">已审核</p>
            </td>
            <td>
                <router-link v-if="e.status===0" :to="`/change?pid=${e.pid}&pname=${e.pname}&startdate=${e.startdate}&enddate=${e.enddate}`">审核</router-link>
            </td>

        </tr>
        <tr>
            <td>{{$route.query.change}}</td>
            <td colspan="5">
                <input type="button" value="首页" @click="page(index=1)">
                <input type="button" value="上一页" @click="page(index-=1)">
                <input type="button" value="下一页" @click="page(index+=1)">
                <input type="button" value="尾页" @click="page(index=pagecount)">
            </td>
        </tr>
    </table>
</template>

<!--1. package.json + 基础配置
2. main.js + App.vue（基础框架）
3. HelloWorld.vue（测试组件）
4. ProgramShow.vue（主要功能）
5. ProgramChange.vue（配套功能）
6. Employin.vue（扩展功能）
7. 组件间整合与优化-->
<script>
    import axios from "axios";
    import qs from "query-string"
    export default {
        name: "ProgramShow",
        data(){
            return{
                programarr:[],
                sel:-1,
                index:1,
                pagecount:0,
            }
        },
        mounted(){
            let obj=this;
            axios.get("/api/program/show?"+qs.stringify({
                status:obj.sel,
                pageIndex:obj.index
            })).then(dt=>{
                obj.programarr=dt.data.programs;
                //  obj.programarr=dt.data.programs;  // 这里接收后端数据
                obj.pagecount=dt.data.pagecount;
            }).catch(err=>{
                console.log(err)
            })
        },
        methods:{
            check(){
                 let obj = this;
                 axios.get("/api/program/show?"+qs.stringify({
                     status:obj.sel,
                     pageIndex:0
                 })).then(dt=>{
                     obj.programarr=dt.data.programs;
                     obj.pagecount=dt.data.pagecount;
                 }).catch(err=>{
                     console.log(err)
                 })
            },
            page(){
                 let obj = this;
                 axios.get("/api/program/show?"+qs.stringify({
                     status:obj.sel,
                     pageIndex:obj.index
                 })).then(dt=>{
                     obj.programarr=dt.data.programs;
                 }).catch(err=>{
                     console.log(err)
                 })
            },


        }

    }
</script>

<style scoped>

</style>